<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>巷陌发现 - 注册</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fDE2OTM4NzUyNjV8fHx8&auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .register-container {
      width: 400px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    .register-title {
      text-align: center;
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
      position: relative;
    }

    .register-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #ffa502, #48dbfb);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
    }

    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s;
    }

    /* 性别选项样式 */
    .gender-group {
      display: flex;
      gap: 20px;
      margin-top: 8px;
    }
    .gender-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .gender-item input {
      width: auto; /* 单选框不需要100%宽度 */
      margin: 0;
    }

    .form-group input:focus {
      border-color: #6a11cb;
      outline: none;
    }

    .register-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .register-btn:hover {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .other-options {
      text-align: center;
      margin-top: 20px;
    }

    .other-options a {
      color: #6a11cb;
      text-decoration: none;
      margin: 0 10px;
      font-size: 14px;
      transition: color 0.3s;
    }

    .other-options a:hover {
      color: #5a0dc8;
    }

    .field-hint {
      font-size: 12px;
      color: #777;
      margin-top: 5px;
      display: block;
    }
  </style>
</head>

<body>
<div class="register-container">
  <h2 class="register-title">巷陌发现 - 注册</h2>

  <!-- 英文名（Username） -->
  <div class="form-group">
    <label for="regUsername">英文名（Username）：</label>
    <input type="text" id="regUsername" placeholder="请输入英文名（登录用）">
    <span class="field-hint">可包含字母、数字和下划线</span>
  </div>

  <!-- 中文名（Real Name） -->
  <div class="form-group">
    <label for="regRealName">中文名（Real Name）：</label>
    <input type="text" id="regRealName" placeholder="请输入真实姓名">
    <span class="field-hint">请输入与身份证一致的姓名</span>
  </div>
  <div class="form-group">
    <label>性别：</label>
    <div class="gender-group">
      <div class="gender-item">
        <input type="radio" name="gender" id="genderMale" value="男" checked>
        <label for="genderMale">男</label>
      </div>
      <div class="gender-item">
        <input type="radio" name="gender" id="genderFemale" value="女">
        <label for="genderFemale">女</label>
      </div>
      <div class="gender-item">
        <input type="radio" name="gender" id="genderOther" value="其他">
        <label for="genderOther">其他</label>
      </div>
    </div>
  </div>

  <!-- 手机号 -->
  <div class="form-group">
    <label for="regPhone">手机号：</label>
    <input type="text" id="regPhone" placeholder="请输入手机号码">
  </div>

  <!-- 密码 -->
  <div class="form-group">
    <label for="regPassword">密码：</label>
    <input type="password" id="regPassword" placeholder="请输入密码">
    <span class="field-hint">建议包含字母、数字和特殊符号，长度不少于6位</span>
  </div>

  <!-- 确认密码 -->
  <div class="form-group">
    <label for="regConfirmPassword">确认密码：</label>
    <input type="password" id="regConfirmPassword" placeholder="请再次输入密码">
  </div>

  <!-- 身份证号 -->
  <div class="form-group">
    <label for="regIdCard">身份证号：</label>
    <input type="text" id="regIdCard" placeholder="请输入18位身份证号">
    <span class="field-hint">请输入真实身份证号，将用于身份验证</span>
  </div>

  <button class="register-btn" id="registerBtn">确定注册</button>

  <div class="other-options">
    <a href="#" id="loginLink">登录</a>
    <a href="#" id="forgetPwdLink">忘记密码</a>
    <a href="#" id="phoneLoginLink">手机号登录</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
<script>
  layui.use(['layer'], function () {
    var layer = layui.layer;

    // 身份证号验证函数
    function validateIdCard(idCard) {
      const reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      return reg.test(idCard);
    }

    // 手机号验证函数
    function validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(phone);
    }

    // 注册按钮点击事件
    $('#registerBtn').click(function () {
      var username = $('#regUsername').val().trim();
      var realName = $('#regRealName').val().trim();
      // 获取选中的性别（新增）
      var gender = $('input[name="gender"]:checked').val();
      var phone = $('#regPhone').val().trim();
      var password = $('#regPassword').val().trim();
      var confirmPassword = $('#regConfirmPassword').val().trim();
      var idCard = $('#regIdCard').val().trim();

      // 表单验证
      if (username === '') {
        layer.msg('请输入英文名');
        return;
      }

      if (realName === '') {
        layer.msg('请输入中文名');
        return;
      }

      // 性别无需额外验证，默认已有选中项

      if (phone === '') {
        layer.msg('请输入手机号');
        return;
      }

      if (!validatePhone(phone)) {
        layer.msg('请输入有效的手机号');
        return;
      }

      if (password === '') {
        layer.msg('请输入密码');
        return;
      }

      if (password.length < 6) {
        layer.msg('密码长度不少于6位');
        return;
      }

      if (confirmPassword === '') {
        layer.msg('请确认密码');
        return;
      }

      if (password !== confirmPassword) {
        layer.msg('两次输入的密码不一致');
        return;
      }

      if (idCard === '') {
        layer.msg('请输入身份证号');
        return;
      }

      if (!validateIdCard(idCard)) {
        layer.msg('请输入有效的18位身份证号');
        return;
      }

      // 显示注册中提示
      layer.msg('注册中...', { icon: 16, shade: 0.3, time: 1000 }, function () {
        $.ajax({
          url: "/user/getLatestUserId",
          type: "post",
          success: function (res) {
            console.log(res);
            if (res > 0) {
              console.log(res)
              const maxId = res;
              // 计算后缀：新用户ID - 25（确保非负）
              const suffix = Math.max(maxId - 25, 0);
              const accountId = 'user' + suffix.toString().padStart(3, '0');
              var user = {
                username: username,
                realname: realName,
                phone: phone,
                password: password,
                idCard: idCard,
                account: accountId,
                gender: gender // 传递性别参数（新增）
              }
              $.ajax({
                url: "/user/register",
                type: "post",
                data: user,
                success: function (res) {
                  console.log(res);
                  if (res.code == 200) {
                    // 显示生成的个人账号ID
                    layer.msg(`注册成功！您的账号ID是` + accountId, {
                      time: 3000
                    }, function () {
                      location.href = '/userLogin';
                    });
                  } else {
                    layer.msg(res.msg || '注册失败，请重试');
                  }
                },
                error: function () {
                  layer.msg("注册失败，请检查网络或联系管理员");
                }
              });
            } else {
              layer.msg(res.msg || '注册失败，请重试');
            }
          },
          error: function () {
            layer.msg("注册失败，请检查网络或联系管理员");
          }
        });
      });
    });

    // 登录链接点击事件
    $('#loginLink').click(function () {
      layer.msg('跳转到登录页面');
      location.href = '/userLogin';
    });

    // 忘记密码链接点击事件
    $('#forgetPwdLink').click(function () {
      layer.msg('跳转到忘记密码页面');
      location.href = '/forgetPassword';
    });

    // 手机号登录链接点击事件
    $('#phoneLoginLink').click(function () {
      layer.msg('跳转到手机号登录页面');
      location.href = '/phoneLogin';
    });
  });
</script>
</body>

</html>